<template>
  <li>
    <h3>姓名是---{{p.name}}</h3>
    爱好是---<span v-for="item in p.hobby" :key="item">{{item}}</span>
  </li>
</template>

<script>
export default {
  name: 'Item',
  /* 
    我们需要通过props选项来接收父组件传递的props属性
    props的类型可以是一个数组
    我们一旦接收到了props属性 则会把属性直接放在组件实例上 供我们直接使用
  */
  props: ['p'],
  mounted() {
    console.log(this, 'item')
    console.log(this.p, 'item')

    /* 
      切记 props是只读属性 不允许被修改
      this.p={}

      但是会有人钻空子 如果一个数据是对象类型 我们不替换对象 而是修改了对象内部的属性
      其实也算是修改了props 但是vue不会报错 因为地址没有改变 它没有监听到props被修改
      但是不推荐使用这样的做法
    */
    this.p.name += '~~~~'
  }
}
</script>

<style>
</style>